<template>
  <div :style="[useWidth(config.width)]">
    <el-input
      type="textarea"
      :rows="config.rows || 6"
      :maxlength="config.maxlength"
      :show-word-limit="config.count"
      v-model="state.value"
      @input="handleInput"
      :placeholder="config.placeholder || $t('formCommon.inputPlaceholder')"
    />
  </div>
</template>
<script lang="ts">
  export default { name: 'textareaComponent' }
</script>
<script setup lang="ts">
  import { useStyle } from '@/hooks'
  const props = defineProps({
    value: {
      type: String,
      defalut: '',
    },
    config: {
      type: Object,
      default: () => ({}),
    },
  })
  // hook
  const { useWidth } = useStyle()
  // 备份默认值
  const initValue: any = props.value
  const state = reactive({
    value: initValue || '',
  })

  const emit = defineEmits(['update:value'])

  const handleInput = () => {
    emit('update:value', state.value)
  }

  const reset = () => {
    state.value = initValue
  }

  defineExpose({ reset })
</script>
